<template>
	<view class="box">
		<view class="table" :class="{outer:border,isRadius:isRadius,stripe:stripe}">
			<view class="t-tr thead">
				<view class="t-th" v-for="item in thList" :style="styleObj">
					{{item.content}}
				</view>
			</view>
			<view class="t-tr tbody" v-for="item in tdList">
				<view class="t-td" v-for="ele in item.data">
					{{ele.content}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script >

export default {
	data() {
		return {
			backgroundColor:""
	  }	
	},
	props: {
		'thList': {
			type: String | Number,
			default: "",
		}	,
	   'tdList':{}, 
    	'border':{},
	   'isRadius':{},
	    'stripe':{}, 
		'theadBgColor':{} 
	},
}

// const props = defineProps([
	
// ])

// const styleObj = reactive({
// 	backgroundColor: props.theadBgColor
// })




</script>

<style lang="scss" scoped>
$border: 1px #D8D8D8 solid;
$radius: 6px;
$bgColor: #F4F5F7;
.box{
	width: 100%;
}
.table{
	width: 100%;
	display: table;
	text-align: center;
}
.t-tr{
	display: table-row;
	.t-th,.t-td{
		padding: 12rpx;
		font-size: 13px;
		color: #3D3D3D;
		display: table-cell;
		border-right: $border;
		border-bottom: $border;
	}
	&.thead .t-th{
		border-top: $border;
	}
	>view:first-child{
		border-left: $border;
	}
	
}


.isRadius{
	.thead .t-th:first-child{
		border-top-left-radius: $radius;
	}
	.thead .t-th:last-child{
		border-top-right-radius: $radius;
	}
	.tbody:last-child .t-td:first-child{
		border-bottom-left-radius: $radius;
	}
	.tbody:last-child .t-td:last-child{
		border-bottom-right-radius: $radius;
	}
}



.stripe{
	.thead .t-th,
	.tbody:nth-of-type(2n-1) .t-td{
		background-color: $bgColor;
	}
}


// outer
.outer {
	.t-td,.t-th{
		border-right: none;
	}
	.thead .t-th:last-child,
	.tbody .t-td:last-child{
		border-right: $border;
	}
}


</style>